<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        p#specialpara{ position: relative; top: 10px;left: 20px;}
    </style>
</head>
<body>
<p>First Paragraph</p>
<p>Second Paragraph</p>
<p id="specialpara">Third Paragraph (with ID)</p>
<p>Fourth Paragraph</p>

<div>
    <h2>相对定位(absolute)下，可以利用 top 和 left 属性相对于元素在文档流中的常规位置重新定位</h2>
    <h2>绝对定位(relative)下，元素从文档流中被“连根拔起”，然后再相对于其他元素（在这里，
        是默认的定位上下文 body）定位</h2>
    <h2>滚动页面才发现，固定定位(fixed)元素不随着页面滚动而移动</h2>
</div>
</body>
</html>